<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>document-object-model</title>
</head>

<body>
    <p>读写Node节点属性</p>
    <form action="www.xxx.com">
        username:<input type="text" />
        password:<input type="password" />
        <button type="submit">提交</button>
    </form>
    insert:<input class="i" type="text" />
    <!-- input系列标签value值用于数据交互 -->
    <!-- 非input系列标签 innerText innerHtml属性用于数据展示 -->
    <div id="abc">abc</div>
    <div id="def">def
        <div>xxx</div>
    </div>
    <script>
        let abc = document.querySelector("#abc");
        let def = document.querySelector("#def");
        
        function a(e) {
            e.preventDefault();
            let username =
                document.querySelector("form input[type=text]");
            let password =
                document.querySelector("form input[type=password]");
            let insert = document.querySelector(".i");
            console.log(username, password, insert);
            console.log(username.value, password.value, insert.value)
        };
        let button = document.
            querySelector("button[type=submit]");
        button.addEventListener("click", a);
    </script>
</body>